<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item label="运营商" prop="operatoruid">
					<el-select v-model="filters.operatoruid" clearable collapse-tags filterable placeholder="请选择运营商">
						<el-option value="0" label="全部">全部</el-option>
						<el-option
								v-for="item in operator"
								:key="item.operatoruid"
								:label="item.operatorname"
								:value="item.operatoruid">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="分销商" prop="useruuid">
					<el-select v-model="filters.useruuid" placeholder="请选择分销商" filterable collapse-tags clearable @change="changeDownShop"    >
						<el-option value="0" label="全部">全部</el-option>
						<el-option
								v-for="item in users"
								:key="item.user.useruuid"
								:label="item.user.username"
								:value="item.user.useruuid">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="话费产品" prop="downprouuid">
					<el-select v-model="filters.downprouuid" filterable collapse-tags placeholder="请选择话费产品">
						<el-option value="0" label="全部">全部</el-option>
						<el-option
								v-for="item in products"
								:key="item.downprouuid"
								:label="item.productName"
								:value="item.productName">
						</el-option>
						</el-select>
				</el-form-item>
				<el-form-item label="省份" prop="provinceuuid">
					<el-select v-model="filters.provincename" placeholder="请选择省份" filterable collapse-tags clearable @change="changeUpShopName">
						<el-option value="0" label="全部">全部</el-option>
						<el-option
								v-for="item in info"
								:key="item.provinceuuid"
								:label="item.provincename"
								:value="item.provincename">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-date-picker type="datetime" placeholder="开始时间" clearable format="yyyy-MM-dd HH:mm:ss"   v-model="filters.starttime" style="width: 100%;"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-date-picker type="datetime" placeholder="结束时间" clearable format="yyyy-MM-dd HH:mm:ss"   v-model="filters.endtime" style="width: 100%;"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<span>总成功率:{{sumSuccessRate}}</span>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getup">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="exportDataDown">导出</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="ups" highlight-current-row v-loading="listLoading" border  @selection-change="selsChange" max-height="620" show-summary style="width: 100%;">
			<el-table-column type="index" width="80" label="编号">
			</el-table-column>
			<el-table-column prop="username" label="渠道名称" show-overflow-tooltip align="center" >
			</el-table-column>
			<el-table-column prop="proname" label="产品名称" show-overflow-tooltip align="center" >
			</el-table-column>

			<!--<el-table-column prop="success" label="成功笔数" show-overflow-tooltip  >-->
			<!--</el-table-column>-->
			<!--<el-table-column prop="failt" label="失败笔数" show-overflow-tooltip  >-->
			<!--</el-table-column>-->

			<el-table-column align="center"
					prop="总订单"
					label="总订单"
			>
				<el-table-column prop="sumcount" label="交易笔数" align="center" show-overflow-tooltip  >
				</el-table-column>
				<el-table-column prop="summoney" label="原价" align="center" show-overflow-tooltip  >
				</el-table-column>
				<el-table-column prop="sumdis" label="售价" align="center" show-overflow-tooltip  >
				</el-table-column>
			</el-table-column>

			<el-table-column prop="sumamount" label="成功订单" align="center" show-overflow-tooltip  >
				<el-table-column prop="successnum" label="交易笔数" align="center" show-overflow-tooltip  >
				</el-table-column>
				<el-table-column prop="sucmoney" label="原价" align="center" show-overflow-tooltip >
				</el-table-column>
				<el-table-column prop="sudis" label="售价" align="center" show-overflow-tooltip  >
				</el-table-column>
				<el-table-column prop="successRate" label="成功率" align="center" show-overflow-tooltip  >
				</el-table-column>
			</el-table-column>
			<el-table-column prop="sumamount" label="失败订单" align="center"  show-overflow-tooltip  >
				<el-table-column prop="failtnum" label="交易笔数" align="center" show-overflow-tooltip  >
				</el-table-column>
				<el-table-column prop="famoney" label="原价" align="center" show-overflow-tooltip >
				</el-table-column>
				<el-table-column prop="failtdis" label="售价" align="center" show-overflow-tooltip  >
				</el-table-column>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-pagination
				@current-change="handleCurrentChangeMatch"
				@size-change="handleSizeChangeMatch"
				layout="total,sizes,prev, pager, next"
				:total="total">
		</el-pagination>

	</section>
</template>

<script>
	import util from '../../common/js/util'
	//import NProgress from 'nprogress'
	import {
		findAllDownShopInfo,
		findByUuidDownProduct,
		getDownFlowCount,
		exportDataDown,
		getOperatorListPage, findAllPro
	} from '../../api/api';
    import moment from 'moment';
	export default {
		data() {
			return {
                filters: {
                    useruuid: '',
                    downprouuid:'',
					provinceuuid:'',
					provincename:'',
					operatoruid:'',
                    starttime:moment(new Date(),"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD') + " 00:00:00",
                    endtime:moment(new Date(),"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD') + " 23:59:59"
                },
                users: [],
                products:[],
                info:[],
                ups:[],
				operator:[],
                total: 0,
                start: 0,
                pageSize: 10,
                listLoading: false,
				sumSuccessRate:"0%"
			}
		},
		methods: {
			findAllPro:function(){
				let para = {useruuid: ''};
				findAllPro(para).then(datas => {
					let {message, code, data} = datas;
					if (code !== "0") {
						this.$message({
							message: message,
							type: 'error'
						});
					} else {
						this.info = data;
					}
				});
			},
			getOperatorListPage() {
				let para = {
					start: 1,
					pageSize:10,
					operatorname:'',
				};
				getOperatorListPage(para).then((datas) => {
					let { message, code, data } = datas;
					if (code !== "0") {
						this.$message({
							message: message,
							type: 'error'
						});
					} else if(data && data.result) {
						this.operator = data.result;
					}
					this.findAllPro();
				});
			},
			//性别显示转换
			formatSex: function (row, column) {
				return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
			},
            handleCurrentChangeMatch: function (val) {
                this.start = val ;
                this.getup();
            },
            handleSizeChangeMatch: function (val) {
                this.pageSize = val;
                this.getup();
            },
			changeUpShopName(value){
				this.filters.provincename = value;
				console.log(value)
			},
            getup() {
				let para = {
                    start: this.start,
                    pageSize: this.pageSize,
					useruuid: this.filters.useruuid == "" || this.filters.useruuid == 0 ? "" : this.filters.useruuid,
					downprouuid: this.filters.downprouuid == "" || this.filters.downprouuid == 0 ? "" : this.filters.downprouuid,
					provinceuuid:this.filters.provincename == "" || this.filters.provincename == 0 || this.filters.provincename == "全国" ? "" : this.filters.provincename,
					operatoruid:this.filters.operatoruid == "" || this.filters.operatoruid == 0  ? "" : this.filters.operatoruid,
                    starttime:(this.filters.starttime == "" || this.filters.starttime == undefined ) ? "" : moment(this.filters.starttime,"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD HH:mm:ss'),
                    endtime: (this.filters.endtime == "" || this.filters.endtime == undefined) ? "" : moment(this.filters.endtime,"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD HH:mm:ss')
				};
                getDownFlowCount(para).then(datas =>{
                    this.listLoading = false;
                    let {message, code, data} = datas;
                    if (code !== "0") {
                        if (code === "37") {
                            this.$router.push({path: '/login'});
                        }
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    } else if(datas && datas.data) {

                        this.total = datas.data.totalCount;
                        this.ups = datas.data.result;
						let sum = 0;
						let success = 0 ;
						this.ups.forEach(item =>{
							try{
								item.successRate = (item.sumcount == 0 ? "0" : (item.successnum / item.sumcount)).toFixed(2) * 100 +"%";
								sum += parseInt(item.sumcount);
								success += parseInt(item.successnum);
							}catch(error){
								console.log(error)
							}

						})
						this.sumSuccessRate = (sum == 0 ? 0 :  (success / sum).toFixed(2) * 100 )+"%";
                    }
				}).catch(e =>{
                    this.listLoading = false;
				});

			},
            exportDataDown:function () {
                let para = {
                    start: this.start,
                    pageSize: this.pageSize,
                    useruuid: this.filters.useruuid,
                    downprouuid:this.filters.downprouuid,
                    starttime:(this.filters.starttime == "" || this.filters.starttime == undefined ) ? "" : moment(this.filters.starttime,"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD HH:mm:ss'),
                    endtime: (this.filters.endtime == "" || this.filters.endtime == undefined) ? "" : moment(this.filters.endtime,"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD HH:mm:ss')
                };
                exportDataDown(para).then(res =>{
                    let {message, code, data} = res;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    } else {
                        window.open(data.path);
                    }
				});

            },
			selsChange: function (sels) {
				this.sels = sels;
			},handleAdd:function () {

            },findAllDownShopInfo:function () {
                let para = {useruuid: JSON.parse(sessionStorage.getItem("user")).useruuid};
                findAllDownShopInfo(para).then(datas => {
                    let {message, code, data} = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    } else {
                        this.users = data;
                    }
                });
            },
            changeDownShop:function (value) {
                let para = {
                    useruuid: value
                };
                findByUuidDownProduct(para).then(datas => {
                    let {message, code, data} = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    } else {
                        this.products = data;
                    }
                });
            },
			findAllPro:function(){
				let para = {useruuid: ''};
				findAllPro(para).then(datas => {
					let {message, code, data} = datas;
					if (code !== "0") {
						this.$message({
							message: message,
							type: 'error'
						});
					} else {
						this.info = data;
					}
				});
			},
		},
		mounted() {
//		    this.getup();
			this.getOperatorListPage();
		    this.findAllDownShopInfo();
		    this.findAllPro();
		}
	}

</script>

<style scoped>

</style>
